<template>
  <page-header-wrapper>
    <a-card>
      <!--最低通过分数线-->
      <ScoreLine />
      
      <a-popover title='作用' placement='topLeft'>
        <template slot='content'>
          <p>注册为判题人后 可以对分配到的用户答题
            <a-tag color='green'>进行评分</a-tag>
          </p>
        </template>
        <a-divider orientation='left'>判题人设置</a-divider>
      </a-popover>
      <div class='table-page-search-wrapper' style='margin-bottom: 50px;'>
        <a-form :form='form' layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='协会成员列表'>
                <a-select
                  v-decorator="['userId', {rules: [{required: true, message: '判题人不能为空'}]}]"
                  placeholder='请选择判题人'>
                  <a-select-option
                    v-for='candidate in candidateList'
                    :key='candidate.userId'> {{ candidate.studentId }} {{ candidate.nickName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-button
                @click='handleSubmitJudger'
                :disable='loadingReg'
                :loading='loadingReg'>
                注册判题人
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <!--搜索区域-->
      <a-divider orientation='left'>判题人搜索</a-divider>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='判题人ID'>
                <a-input
                  v-model='queryParam.judgerId'
                  placeholder='请输入操作名称或关键字' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='判题人姓名'>
                <a-input
                  v-model='queryParam.judgerName'
                  placeholder='请输入操作名称或关键字' />
              </a-form-item>
            </a-col>
            <!--展开区域 => 高级搜索功能-->
            <a-col :md='8' :sm='24'>
              <a-form-item label='判题目状态'>
                <a-select
                  v-model='queryParam.status'
                  placeholder='请选择操作类型'>
                  <a-select-option value='0'>未完成</a-select-option>
                  <a-select-option value='1'>进行中</a-select-option>
                  <a-select-option value='2'>已完成</a-select-option>
                </a-select>
              </a-form-item>
            
            </a-col>
            <a-col :md='24' :sm='24'>
              <span class='table-page-search-submitButtons'>
                <a-button @click='() => this.queryParam = {}'>重置</a-button>
                <a-button style='margin-left: 8px'
                          type='primary'
                          @click='getJudgerList'>查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <br>
      
      <a-table
        :columns='columns'
        rowKey='judgerId'
        :pagination='pagination'
        bordered
        showPagination='auto'
        :loading='loading'
        @change='handleTableChange'
        :data-source='judgerList'>
        
        <span
          slot='nickNames'
          slot-scope='nickNames'>
      <a-tag
        v-for='nickName in nickNames'
        :key='nickName'
        :color="'geekblue'"
      >
        {{ nickName }}
      </a-tag>
    </span>
        
        <span slot='status' slot-scope='text, record, index'>
                    <a-tag
                      :color="(record.status === '0') ? 'red' : 'green'">
            {{ record.status === '0' ? '未完成' : '已完成' }}
          </a-tag>
        </span>
        
        <!--操作-->
        <template slot='action'
                  slot-scope='text, record, index'>
          <a-button
            type='primary'
            @click='showLogInfoModal(record)'
            style='border-radius: 5px;margin-right: 15px;'>查看
          </a-button>
          
          
          <a-popconfirm
            title='是否确认删除'
            ok-text='确认'
            cancel-text='取消'
            @confirm='confirmDel(record)'
            @cancel='cancelDel'
          >
            <a-button
              style='border-radius: 5px'>删除
            </a-button>
          </a-popconfirm>
        </template>
      
      </a-table>
    </a-card>
    
    <a-modal
      width='20'
      title='判题人信息'
      :centered='true'
      :visible='visible'
      okText='确认'
      cancelText='取消'
      @ok='handleOk'
      @cancel='handleOk'
    >
      
      <a-descriptions bordered>
        <a-descriptions-item label='判题人'>
          {{ modalForm.judgerName }}
        </a-descriptions-item>
        <a-descriptions-item label='判题状态'>
          <a-tag
            :color="(modalForm.status === '0') ? 'red' : 'green'">
            {{ modalForm.status === '0' ? '未完成' : '已完成' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label='需要判题的用户'>
          <a-tag
            color='geekblue'
            v-for='(nickName, index) in modalForm.nickNames'
            :key='index'>
            {{ nickName }}
          </a-tag>
        </a-descriptions-item>
        
        <a-descriptions-item label='需要判的提交题目编号'>
          <a-tooltip>
            <template slot='title'>
              点击复制
            </template>
            <a-tag
              color='geekblue'
              v-for='(replyId, index) in modalForm.replyIds'
              :key='index'
              @click='copy(replyId)'>
              {{ replyId }}
            </a-tag>
          </a-tooltip>
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { addJudger, delJudger, getCandidate, getJudgerList } from '@/api/judge'
import ScoreLine from '@/views/system/ScoreLine.vue'

const columns = [
  {
    title: '判题人编号',
    dataIndex: 'judgerId',
    scopedSlots: { customRender: 'judgerId' }
  },
  {
    title: '判题人',
    dataIndex: 'judgerName',
    scopedSlots: { customRender: 'judgerName' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '已分配用户',
    dataIndex: 'nickNames',
    scopedSlots: { customRender: 'nickNames' }
  },
  {
    title: '已分配答题数量',
    dataIndex: 'count',
    scopedSlots: { customRender: 'count' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: 180,
    fixed: 'right'
  }
]


export default {
  name: 'JudgerManager',
  components: { ScoreLine },
  data() {
    return {
      columns,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      judgerList: [],
      candidateList: [],
      loading: false,
      loadingReg: false,
      visible: false,
      advanced: false,
      modalForm: {},
      
      // 查询参数
      queryParam: {},
      // 分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      }
    }
  },
  created() {
    this.getCandidate()
    this.getJudgerList()
  },
  methods: {
    // 添加判题人
    handleSubmitJudger(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          addJudger(values).then(response => {
            this.$message.success('添加成功')
            // 重新判题人数据
            this.getCandidate()
            // 重新渲染判题人列表
            this.getJudgerList()
          })
        }
      })
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 添加分页参数
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      
      this.getJudgerList()
    },
    // 获取判题人列表
    getJudgerList() {
      this.loading = true
      getJudgerList(this.queryParam).then(response => {
        this.judgerList = response.rows
        this.pagination.total = response.total
      })
      this.loading = false
    },
    // 获取候选人
    getCandidate() {
      getCandidate().then(response => {
        this.candidateList = response.data
      })
    },
    // 展开高级搜索功能
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    addDataQueryParam(date, dataList) {
      this.queryParam.startTime = dataList[0]
      this.queryParam.endTime = dataList[1]
    },
    showLogInfoModal(data) {
      this.visible = true
      this.modalForm = data
    },
    handleOk() {
      this.visible = false
    },
    // 删除判题人
    confirmDel(record) {
      delJudger(record.judgerId).then(() => {
        this.$message.success('删除成功')
        this.getCandidate()
        this.getJudgerList()
      })
    },
    // 取消删除
    cancelDel() {
    
    },
    colorFilter(type) {
      let color = 'red'
      switch (type) {
        case type === '0':
          color = 'red'
          break
        case type === '1':
          color = 'blue'
          break
        case type === '2':
          color = 'green'
          break
      }
      return color
    },
    contentFilter(type) {
      let content = '未完成'
      switch (type) {
        case type === '0':
          content = '未完成'
          break
        case type === '1':
          content = '进行中'
          break
        case type === '2':
          content = '已完成'
          break
      }
      return content
    },
    copy(copyResult) {
      //创建input标签
      var input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = copyResult
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制成功')
      //移除input标签
      document.body.removeChild(input)
    }
  }
}
</script>

<style scoped>

</style>